<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.0.min.js"></script>
 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<title>Insert title here</title>
<!-- CSS样式 -->
<style type="text/css">
body div{border:1px solid #ccc;
}
.main{float: left;width:70%; height:500px; margin-left: 15%;margin-right: 15%;
}
.main div{float: left;margin:10px;
}
.left{width:30%; height:90%;
}
.leftup{width:90%; height:80%;
}
.right{width:60%; height:97%;
}
img{width:100%;height:100%;
}
.leftup div{width:95%;height:8%;
}
.toptwo{width:95%;height:10%;margin: 0px;
}
.toptwo div{text-align: center; line-height: 40px;font-size: 20px;
background: url(images/1.jpg) no-repeat; background-size:100% 100%;
color:white;
 -webkit-transition:color 0.7s, background 1s;
}
.toptwo div:hover { color:yellow; background: url(images/2.jpg); 
}
.showdiv{width:95%;
}
.showdiv div{width:100%;height:100px;text-align: center;
line-height: 100px;
}
.data{width:73%;height:100%;
}

</style>


<!-- 改变hover -->
<script type="text/javascript">
	$(function(){
		$(".oneGoods").mouseenter(function(){
			$(this).css('border','1px solid #e96937');
		});
		
		$(".oneGoods").mouseleave(function(){
		$(this).css('border','1px solid #ccc');
		});
	})
</script>


<!-- 改变左边个人信息的字体 -->
<script type="text/javascript">
	$(function(){
		$(".leftup").append("			<div class = \"sexy\">住址：北京市			</div>			<div class = \"sexy\">联系方式：2449897305			</div>");
		
		$(".left div").css('color','green');
		$(".left div").css('font-weight','bold');
		
		$(".left div").css('border','0px');
		$(".head").css('border','10px solid #ccc');
		$(".left div").css('background-color','#defae5');
		$(".leftup div").css('background-color','#8eea78');
		
		
		$(".left").css('border','0px');
		$(".left").css('border-radius','0px');
		
		$(".right").css('border','0px');
		$(".right").css('border-radius','0px');
		$(".right").css('border-left','2px solid green');
		
		$(".right div").css('background-color','#defae5');
		$(".showdiv div").css('background-color','white');
		$(".showdiv").css('border','0px');
		
		
		$(".say1").css('background-color','#defae5');

		
	})
</script>


<!-- 改变三个选项的大小 -->
<script type="text/javascript">
	$(function(){
		$('.toptwo').css('height','30px');
		$('.toptwo div').css('line-height','30px');
	})
</script>


<script type="text/javascript">

	$(function(){
		if("${i}"=="1"){
			alert("分享成功");
		}
	})
</script>

<script type="text/javascript">
	$(function(){
		if("${longg}" == "0"){
			$('.tishi').css('display','display');
		}
	})
</script>


<script type="text/javascript">
	$(function(){
		if("${login}"=="0"){
			alert("请先登录");
		}
	});
</script>


<!-- 页面索引 -->
<script type="text/javascript">
	$(function(){
		var n=${page.currentpage};
		var k=${page.currentpage};
		var h=${page.sumpage};
		if(n==1){
			//$("#lastpage").css("display","none");
			$("#lastpage1").attr("disabled",true);
		}
		if(k==h){
			$("#nextpage1").attr("disabled",true);
			//$("#nextpage").css("display","none");
		}
		
		$("input[type='button']").css("background-color","#defae5");
		$("#page${page.currentpage}").css("background-color","green");
		
	});
</script>


<!-- 改变颜色 -->
<script type="text/javascript">
$(function(){
	$('.selected2').css("background","url(images/changeColor.png)");
	$('.selected2').css("color","green");
	
})
</script>

</head>



<body>
<jsp:include page="/top.jsp"></jsp:include>
<div class = "main"> 
	<div class = "left">
		<div class = "leftup">
			<div class = "head" style = "border:10px solid #ccc;border-radius:80px;width:80px;height:80px;;margin-left: 68px;">
				<img alt="" src="${user.path }"style = "border-radius:40px;">
			</div > 
			<div class = "userID"> 账号:${user.userID }
			</div>
			<div class = "userName">用户名:${user.userName }
			</div>
			<div class = "sexy">性别:${user.sexy }
			</div>
			
		</div>
		
	</div >
	
	<div class ="right">
<!-- 	选择框 -->
		<div class = "toptwo">
			<a href="${pageContext.request.contextPath }/MyShouServlet?page=1"><div class = "left" style="width:32.9%;height:100%;margin:0px;">
				我的收藏
			</div>
			</a>
			<a href = "${pageContext.request.contextPath }/ShowMyGoodsServlet?page=1">
			<div class = "middle"  style = "width:32.9%;height:100%;margin:0px;">
				我的关注
			</div>
			</a>
			<a href="${pageContext.request.contextPath }/MyShareServlet?page=1">
			<div class = "right1"  style = "width:32.9%;height:100%;margin:0px;">
				我的分享
			</div>
			</a>
		</div>
	
<!-- 	图片展示区 -->
	<div class = "showdiv"><div class = "tishi" style = "display: none;">当前没有任何分享</div>
		<c:forEach items = "${beans }" var = "n" >
		<div class="oneGoods" style = "width:155px;height:200px;margin:8px;">
			<div class= "imagediv" style = "width:100%;height:70%;margin:0px;">
				<a href = "${pageContext.request.contextPath }/CommentServlet?shareID=${n.shareID}">
					<img alt="" src="${n.path }" style = "width:100%;height:100%;">
				</a>
			</div>
			<div class = "say1" style = "line-height:20px;width:90%;margin:0px;margin-left:5%;background-color:#defae5;margin-right:5%;border:0px;font-size:12px;color:#999;height:49px;;overflow: hidden;">
					描述：${n.say }
			</div>
		</div>
		</c:forEach>
	</div>
	
	
		<div class = "page" style = "border:0px solid green; ">
			<!-- 页面索引（页码） -->
<div style="width:530px;border:0px solid black;padding:0px;float: left;">
	<div style="">
		共${page.sumpage }页
		<a href="${pageContext.request.contextPath }/MyShareServlet?page=1">  <input type="button" value="首页" id="first" disa>  </a>
		<a id="lastpage" href="${pageContext.request.contextPath }/MyShareServlet?page=${page.currentpage-1}">  <input type="button" value="上一页" id="lastpage1">   </a>
		<c:set value="${page.sumpage }" var="sumpage" />
		
		<c:forEach begin="1" end="${page.sumpage }" var="n" step="1">
			<c:choose>
				<c:when test="${page.buttonbegin-1<n&&page.buttonend+1>n}">
					<a href="${pageContext.request.contextPath }/MyShareServlet?page=${n}"><input type="button" value="${n }" id="page${n }"></a>
				</c:when>
			</c:choose>
		</c:forEach>
		<a id="nextpage" href="${pageContext.request.contextPath }/MyShareServlet?page=${page.currentpage+1}">  <input type="button" value="下一页" id="nextpage1">   </a>
		<a href="${pageContext.request.contextPath }/MyShareServlet?page=${page.sumpage}">  <input type="button" value="尾页" id="lastestpage">   </a>
	</div>
</div>
		</div>
		<!-- 页面索引（页码）结束 -->
		
		
	</div>
</div>


<!-- 悬浮分享框开始 -->
<script type="text/javascript">
	$(function(){
		$('.main').css('width','69%');
		$('.fixed div').css('float','left');
		$('.fixed').css('float','left');
		$('.fixed').css('background-color','#defae5');
		
		if($("#user-name2").val()==""){
			$("#sub").attr("disabled", true);
		}
		
		$("#user-name2").change(function(){
			$("#sub").attr("disabled", false);
		})
	})
</script>
<div class = "fixed" style = "position:fixed;left:1150px;top:203px;background-color: #e9f7e6;width:180px;height:300px;">
	<form  style = "" action="${pageContext.request.contextPath }/UploadServlet"   method="post"  enctype="multipart/form-data">
	<div style=" margin-left:30px;margin-top:20px;background-color:white; border:0px;color:green;font-weight:bold;font-size: 20px;margin-bottom: 10px; text-align: center;">
		上传我的分享
	</div>
	<div style = "margin-left:6px;width:160px;height:30px;">
		<input type = "file"  id="user-name2" name="productImg" style = "width:200px;height:40px;border:0px solid red;">
	</div>
	<div class = "saydiv">
		<textarea rows="" cols="" name = "say" placeholder = "请输入相关描述" style  = "margin-left:10px;width:150px;height:100px;"></textarea>
	</div>
	<div style = "margin-left: 40px; margin-top:30px;">
		<input type = "submit" value = "分享" id="sub" style  ="background-color:#defae5;color:green;width:100px;height:30px;font-size: 20px;" >
	</div>
</form>
</div>
<!-- 悬浮分享框结束 -->



</body>
<!-- //改变颜色 -->
<script type="text/javascript">
	$(function(){
		$('.right1').css('background','url(images/changeColor.png)');
		$('.right1').css('color','green');
	})
</script>
</html>